import 'package:flutter/material.dart';
import 'package:flutter_app_demo/podo/card_model.dart';

class MyCard extends StatelessWidget {
    
    final CardViewModel viewModel;
    final double parallaxPercent;
    
    const MyCard({
        Key key,
        this.viewModel,
        this.parallaxPercent = 0.0
    }) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return Stack(
            fit: StackFit.expand,
            children: <Widget>[
                ClipRRect(
                    borderRadius: BorderRadius.circular(15.0),
                    child: FractionalTranslation(
                        translation: Offset(parallaxPercent * 2.0, 0),
                        child: OverflowBox(
                            maxWidth: double.infinity,
                            child: Image.asset(
                                viewModel.bg,
                                fit: BoxFit.cover,
                            ),
                        ),
                    ),
                ),
                Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                        Padding(
                            padding: const EdgeInsets.only(top: 20.0),
                            child: Text(
                                viewModel.title.toUpperCase(),
                                style: TextStyle(color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold, letterSpacing: 2.0),
                            ),
                        ),
                        Expanded(
                            child: Container(),
                        ),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                                Text(
                                    "${viewModel.minHeight}-${viewModel.maxHeight}",
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 120.0,
                                        letterSpacing: -5.0,
                                    ),
                                    overflow: TextOverflow.fade,
                                ),
                                Padding(
                                    padding: const EdgeInsets.only(top: 10.0),
                                    child: Text(
                                        'C',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 22.0,
                                        ),
                                    ),
                                ),
                            ],
                        ),
                        
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                                Icon(
                                    Icons.wb_sunny,
                                    color: Colors.yellow,
                                ),
                                Text(
                                    viewModel.future,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 20.0,
                                    ),
                                ),
                            ],
                        ),
                        Expanded(
                            child: Container(),
                        ),
                        Padding(
                            padding: const EdgeInsets.only(top: 50.0, bottom: 50.0),
                            child:
                            Container(
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(30.0),
                                    border: Border.all(
                                        color: Colors.white,
                                        width: 1.5,
                                    ),
                                    color: Colors.black.withOpacity(0.3),
                                ),
                                child: Padding(
                                    padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20.0),
                                    child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        mainAxisSize: MainAxisSize.min,
                                        children: <Widget>[
                                            Text(
                                                'qwepoiru',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 16.0,
                                                ),
                                            ),
                                            Padding(
                                                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                                                child: Icon(
                                                    Icons.wb_cloudy,
                                                    color: Colors.white,
                                                ),
                                            ),
                                            Text(
                                                'ertu',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 16.0,
                                                ),
                                            ),
                                        ],
                                    ),
                                ),
                            ),
                        ),
                    ],
                )
            ],
        );
    }
}
